<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>加载组件</title>
    <link rel="stylesheet" th:href="@{pearAdminLayUI/component/pear/css/pear.css}" />
    <style>
        .load-div {
            width: 100%;
            height: 300px;
            background-color: lightgray;
            border-radius: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-header">加载组件</div>
    <div class="layui-card-body">
        <div>
            <span>loading.Load(1,message);</span>
            <br><br>
            <span>loading.Load(2,message);</span>
            <br><br>
            <span>loading.Load(3,message);</span>
            <br><br>
            <span>loading.Load(4,message);</span>
            <br><br>
            <span>loading.Load(5,message);</span>
            <br><br>
            <span>loading.remove(time);</span>
            <br><br>
        </div>
        <button class="loading-1 pear-btn pear-btn-primary" plain>加载</button>
        <button class="loading-2 pear-btn pear-btn-success" plain>加载</button>
        <button class="loading-3 pear-btn pear-btn-danger" plain>加载</button>
        <button class="loading-4 pear-btn pear-btn-warming" plain>加载</button>
        <button class="loading-5 pear-btn">加载</button>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-header">加载组件</div>
    <div class="layui-card-body">
        <button class="block-5 pear-btn">加载</button>
        <button class="block-4 pear-btn">加载</button>
        <button class="block-3 pear-btn">加载</button>
        <button class="block-2 pear-btn">加载</button>
        <button class="block-1 pear-btn">加载</button>
        <div class="load-div load-div-1"></div>

    </div>
</div>

<div class="layer-right">

</div>

<script th:src="@{pearAdminLayUI/component/layui/layui.js}"></script>
<script th:src="@{pearAdminLayUI/component/pear/pear.js}"></script>
<script>
    layui.use(['jquery', 'loading'], function() {
        const $ = layui.jquery;
        const loading = layui.loading;

        const msg = 'Do not try to become a person of success but try to become a person of value.' +
            '<br><br>' +
            '- Albert Einstein';

        loading.Load(4, "");
        $(".loading-1").click(function() {
            loading.Load(1, "");
            loading.loadRemove(1000);
        })
        $(".loading-2").click(function() {
            loading.Load(2, "");
            loading.loadRemove(1000);
        })
        $(".loading-3").click(function() {
            loading.Load(3, "");
            loading.loadRemove(1000);
        })
        $(".loading-4").click(function() {
            loading.Load(4, "");
            loading.loadRemove(1000);
        })
        $(".loading-5").click(function() {
            loading.Load(5, "");
            loading.loadRemove(1000);
        })

        $(".block-1").click(function() {
            loading.block({
                type: 1,
                elem: '.load-div-1',
                msg: '加载中'
            })
            loading.blockRemove(".load-div-1", 1000);
        })
        $(".block-2").click(function() {
            loading.block({
                type: 2,
                elem: '.load-div-1',
                msg: ''
            })
            loading.blockRemove(".load-div-1", 1000);
        })
        $(".block-3").click(function() {
            loading.block({
                type: 3,
                elem: '.load-div-1',
                msg: ''
            })
            loading.blockRemove(".load-div-1", 1000);
        })
        $(".block-4").click(function() {
            loading.block({
                type: 4,
                elem: '.load-div-1',
                msg: ''
            })
            loading.blockRemove(".load-div-1", 1000);
        })
        $(".block-5").click(function() {
            loading.block({
                type: 5,
                elem: '.load-div-1',
                msg: ''
            })
            loading.blockRemove(".load-div-1", 1000);
        })
        $(".block-6").click(function() {
            loading.block({
                type: 6,
                elem: '.load-div-1',
                msg: ''
            })
            loading.blockRemove(".load-div-1", 1000);
        })
        loading.loadRemove(1000);
    })
</script>
</body>
</html>
